<!--
  级联选择器弹出框组件              zls-2022/06/05
      Attributes
          1、defaultValue          回选时使用（默认是一个空数组）
          2、input公共组件的部分属性
          其他所有属性均参考vant组件库中的  "Cascader 级联选择"

      Events
          1、finish                弹出框的确认按钮

      Demo==>
          请参考 Form 表单组件
-->

<template>
  <div class="z-calendar">
    <z-input
      :label="$attrs.label"
      :modelValue="inputValue"
      :labelWidth="$attrs['labelWidth']"
      :placeholder="$attrs.placeholder || '请选择'"
      :svg="$attrs.svg || 'jiantou'"
      readonly
      clickable
      @click="show = true"
      @input="input"
    ></z-input>
    <Popup
      v-model:show="show"
      :overlay="$attrs['overlay']"
      :position="$attrs['position'] || 'bottom'"
      :lock-scroll="$attrs['lock-scroll']"
      :close-on-click-overlay="$attrs['close-on-click-overlay']"
      :closeable="$attrs['closeable']"
      :close-icon="$attrs['close-icon']"
      :close-icon-position="$attrs['close-icon-position']"
      :safe-area-inset-bottom="true"
      round
      close-on-popstate
      @click-overlay="show = false"
      @click-close-icon="show = false"
    >
      <Cascader
        v-model="code"
        :title="$attrs['title']"
        :options="$attrs['options']"
        :placeholder="$attrs['placeholder']"
        :active-color="$attrs['active-color']"
        :swipeable="$attrs['swipeable']"
        :field-names="$attrs['field-names ']"
        @finish="finish"
        @close="show = false"
      />
    </Popup>
  </div>
</template>

<script>
export default { name: 'z-cascader' }
</script>
<script setup>
import { ref, useAttrs, inject, getCurrentInstance, watch, onMounted } from 'vue'
import { Popup, Cascader } from 'vant'
const attrs = useAttrs()
const global = getCurrentInstance().appContext.config.globalProperties
const formItem = inject('formItem')
const emit = defineEmits(['finish', 'update:modelValue'])
const props = defineProps({
  defaultValue: {
    type: Array,
    default: () => []
  }
})

const show = ref(false) // 是否弹出
const code = ref('') // 选中值
const inputValue = ref('') // 当前时间(input框使用)

onMounted(() => {
  if (props.defaultValue.length) {
    code.value = props.defaultValue[props.defaultValue.length - 1]
  }
})

watch(
  () => attrs.modelValue,
  newVal => {
    inputValue.value = newVal
  },
  { immediate: true }
)

// 实时改变
function input() {
  show.value = false
  emit('update:modelValue', '')
  emit('finish', { text: '', code: null })
  global.$bus.emit('formItem-change', formItem.value.prop || 'noProp')
}

// 选中某一项后，点击确认按钮 { value: 前选中的时间 }
function finish({ value, selectedOptions, tabIndex }) {
  show.value = false
  inputValue.value = ''
  const codeArr = []
  selectedOptions.forEach(v => {
    inputValue.value += `${v.text},`
    codeArr.push(v.value)
  })
  inputValue.value = inputValue.value.slice(0, -1)
  emit('update:modelValue', inputValue.value)
  emit('finish', { text: inputValue.value, code: codeArr })
  global.$bus.emit('formItem-change', formItem.value.prop || 'noProp')
}
</script>
